<template>
  <!-- 页脚整体容器，添加了类名为 footer，用于设置页脚的整体样式 -->
  <div class="footer">
    <!-- 页脚内容容器，类名为 footer-content，用于包裹和设置页脚具体显示内容的样式 -->
    <div class="footer-content">
      <!-- 显示版权信息的段落标签，这里显示固定的版权文本“© 2024 版权所有” -->
      <p>© 2025 集市交易平台版权所有</p>
    </div>
  </div>
</template>

<script>
// 导出默认的 Vue 组件配置对象
export default {
  // 定义组件的名称为 Footer，方便在其他组件中引用和调试时识别
  name: 'Footer'
}
</script>

<style>
/* 对类名为 footer 的元素进行样式设置，这里是页脚整体容器的样式 */
.footer {
  /*  设置宽度为占满父元素的 100%*/
  width: 100%;
  /*  设置上下内边距为 15 像素，左右内边距为 0*/
  padding: 15px 0;
  /* 设置背景颜色为白色*/
  background-color: #fff;
   /*  添加一个向下的阴影效果，水平偏移为 0，垂直偏移为 -1 像素，模糊半径为 3 像素，阴影颜色为黑色且透明度为 0.05*/
  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
}

/* 对类名为 footer-content 的元素进行样式设置，这里是页脚内容容器的样式 */
.footer-content {
  /*  设置文本内容水平居中对齐*/
  text-align: center;
   /*  设置文本颜色为 #606266*/
  color: #606266;
   /* 设置文本的字体大小为 14 像素*/
  font-size: 14px;
}

/* 媒体查询，当屏幕宽度小于等于 768 像素时，应用以下样式，用于移动端适配 */
@media screen and (max-width: 768px) {
  .footer {
    /*  将页脚整体容器的上下内边距调整为 10 像素，左右内边距为 0*/
    padding: 10px 0;
  }
  
  .footer-content {
     /* 将页脚内容容器中的文本字体大小调整为 12 像素*/
    font-size: 12px;
  }
}
</style>